---
title: Разработка и сборка
description: 'Как начать работу над новым проектом.'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

После создания проекта Astro вы сможете сразу приступить к работе! 🚀

## Редактирование проекта

Чтобы вносить изменения в проект, откройте папку проекта в вашем редакторе кода. Работа в режиме разработки с запущенным dev-сервером позволяет сразу видеть изменения на сайте по мере редактирования кода.

Вы также можете [настроить параметры среды разработки](#настройка-среды-разработки), например, настроить TypeScript или установить официальные расширения редактора для Astro.

### Запуск сервера разработки Astro

Astro включает встроенный сервер для разработки со всем необходимым функционалом. Команда `astro dev` запустит локальный сервер, позволяя впервые увидеть ваш сайт в действии.

Каждый стартовый шаблон содержит предустановленный скрипт, который автоматически выполнит `astro dev` за вас. После перехода в директорию проекта используйте предпочитаемый менеджер пакетов для запуска этой команды и старта сервера разработки Astro.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


Всё работает? Отлично! Ваш проект теперь доступен по адресу [http://localhost:4321/](http://localhost:4321/) — открывайте его в браузере и смотрите результат!

### Работа в режиме разработки

Astro будет отслеживать изменения файлов в каталоге `src/` и обновлять предварительный просмотр сайта по мере сборки, поэтому вам не придётся перезапускать сервер при внесении изменений во время разработки. При работе dev-сервера вы всегда сможете увидеть в браузере актуальную версию вашего сайта.

При просмотре сайта в браузере вам будет доступна [панель разработчика Astro](/ru/guides/dev-toolbar/). В процессе разработки она поможет вам проверить ваши [островки](/ru/concepts/islands/), выявить проблемы с доступностью и многое другое.

Если после запуска dev-сервера вы не можете открыть свой проект в браузере, вернитесь в терминал, где вы выполняли команду `dev`, и проверьте отображаемые сообщения. Так вы поймёте, произошла ли ошибка или обслуживается ли ваш проект по URL-адресу, отличному от [http://localhost:4321/](http://localhost:4321/).

## Сборка и предварительный просмотр вашего сайта

Чтобы проверить версию вашего сайта, которая будет создана во время сборки, закройте сервер разработки (<kbd>Ctrl</kbd> + <kbd>C</kbd>) и запустите соответствующую команду сборки для вашего менеджера пакетов в терминале:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

Astro создаст готовую к развёртыванию версию вашего сайта в отдельной папке (по умолчанию `dist/`), и вы сможете наблюдать за её развитием в терминале. Это предупредит вас о любых ошибках сборки проекта до его развёртывания в производство. Если TypeScript настроен на `strict` или `strictest`, сценарий `build` также проверит ваш проект на наличие ошибок типа.

Когда сборка будет завершена, запустите соответствующую команду `preview` (например, `npm run preview`) в терминале, и вы сможете просмотреть собранную версию сайта локально в том же окне предварительного просмотра браузера.

Обратите внимание, что в этом случае ваш код просматривается в том виде, в котором он существовал на момент последнего запуска команды сборки. Это позволит вам увидеть, как будет выглядеть ваш сайт, когда он будет развёрнут в интернете. Любые последующие изменения, внесённые в код после сборки, **не** будут отражены во время предварительного просмотра сайта, пока вы не выполните команду сборки снова.

Используйте комбинацию <kbd>Ctrl</kbd> + <kbd>C</kbd>, чтобы выйти из предварительного просмотра и запустить другую команду терминала, например, перезапустить сервер разработки, чтобы вернуться в [работу в режиме разработки](#работа-в-режиме-разработки), который обновляется по мере редактирования и отображает предварительный просмотр изменений вашего кода.

<ReadMore>Узнайте больше об [интерфейсе командной строки Astro](/ru/reference/cli-reference/) и командах терминала, которые вы будете использовать при сборке с помощью Astro.</ReadMore>

:::tip 
Возможно, вы захотите [развернуть ваш новый сайт сразу же](/ru/guides/deploy/), прежде чем вносить множество изменений в код. Это полезно для публикации минимальной рабочей версии сайта и может сэкономить время на устранении проблем с развёртыванием в будущем.
:::

## Следующие шаги

Отлично! Теперь вы готовы начать строительство с помощью Astro! 🥳

Вот несколько вещей, которые мы рекомендуем изучить в следующий раз. Вы можете читать их в любом порядке. Вы можете даже оставить нашу документацию на некоторое время и поиграть в кодовой базе вашего нового проекта Astro, возвращаясь сюда всякий раз, когда у вас возникнут проблемы или вопросы.

### Настройка среды разработки

Изучите приведённые ниже руководства, чтобы улучшить свой опыт разработки.

<CardGrid>
  <LinkCard
    title="Настройка редактора"
    description="Настройте редактор кода, чтобы улучшить свою работу и открыть новые возможности."
    href="/ru/editor-setup/"
  />
  <LinkCard
    title="Панель разработчика"
    description="Изучите полезные функции панели инструментов разработчика."
    href="/ru/guides/dev-toolbar/"
  />
  <LinkCard
    title="Настройка TypeScript"
    description="Настройте параметры для проверки типов, IntelliSense и многого другого."
    href="/ru/guides/typescript/"
  />
</CardGrid>

### Изучите возможности Astro

<CardGrid>
  <LinkCard
    title="Структура проекта"
    description="Разберитесь в организации файлов Astro с помощью руководства по структуре проекта."
    href="/ru/basics/project-structure/"
  />
  <LinkCard
    title="Работа с коллекциями контента"
    description="Добавляйте контент на сайт с валидацией метаданных и автоматической типизацией."
    href="/ru/guides/content-collections/"
  />
  <LinkCard
    title="Добавление переходов между страницами"
    description="Создавайте плавные анимации и переходы."
    href="/ru/guides/view-transitions/"
  />
  <LinkCard
    title="Архитектура островков"
    description="Узнайте об архитектуре островков Astro."
    href="/ru/concepts/islands/"
  />
</CardGrid>

### Пройдите вводное руководство

Создайте полнофункциональный блог на Astro с нуля, используя наше [вводное руководство](/ru/tutorial/0-introduction/).

Это отличный способ увидеть, как работает Astro, и пройти основы работы со страницами, макетами, компонентами, маршрутизацией, островками и прочим. Для начинающих разработчиков предусмотрен отдельный раздел с пошаговыми инструкциями по установке программ, регистрации в GitHub и публикации сайта.

